<template>
	<view>
		 <view class="beijing">
			 <view class="box">
				
				<text style="padding-bottom: 26px;"> <text class="ktxje">可提现金额：</text>  ￥0.46</text>
				<view>输入体现金额</view>
				<view class="input" >
					<input placeholder='0' style="font-size: 65rpx;font-weight: 500; border-bottom: solid 2rpx #f5f5f5; width: 65vw" type="text">
					<tn-button :fontSize='25' class="tixian">全部提现</tn-button>
				</view>
			 </view>
			 <view class="shouxvfei" style="padding: 30rpx;">体现手续费：0</view>
			 <view class="box">
				 <view><text  class="tn-icon-bankcard cards"></text>选择提现银行卡</view>
				  <tn-radio-group v-model="value" @change="radioGroupChange">
				 <view v-for="(item,index) in card" class="fangshi">
					    <tn-radio :name="index"  @change="radioChange(index)"  
					          >
							   <text>{{item.bank}}<text style="margin-left: 20rpx; font-size: 20rpx; color: #aeaeae;">{{item.num.slice(0,5) }}******{{item.num.slice(5,)}}</text> </text>
							   
					         </tn-radio>
					
				</view>
				</tn-radio-group>
				<view @click="addcard" class="fangshi">
				
			
					<view>添加银行卡</view>
					 
					 <text class=" tn-icon-right" ></text>
				</view>
					
			 </view>
			 <view class="button" >
				 <tn-button class="tn-main-gradient-cyan--reverse" backgroundColor="#3ab54a" :fontSize='24' fontColor="tn-color-white" shadow  width="89vw" shape="round">提现</tn-button>
				 
			 </view>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:0,
				value: 3,
				card:[
				{
				select: 0,
				bank:'中国银行',
				num:"372801828109202"},
				{select: 1,
				bank:'招商银行',
				num:"372801828109202"},
				{select: 2,
				bank:'青岛银行',
				num:"112233445566778899"},
				{select: 3,
				bank:'建设银行',
				num:"372801828109202"},
				
				]
			}
		},
		methods: {
			radioGroupChange(){
				
			},
			radioChange(){
				
			},
			addcard(){
				console.log(321)
				uni.navigateTo({
					url:"/pages/bank/bank"
				})
			}
		},
		onShow(){
			// let data = uni.getStorageSync("chooes")
				
			// if(data){
			// 	this.type = 1
			// }else{
			// 	this.type =0
			// }
		}
	}
</script>

<style scoped>
		
	*{
		padding: 0;
		margin: 0;
	}
	.beijing{
		height: 100vh;
		background: #f3f3f3;
		/* padding: 30rpx; */
	}
	.cards{
		background-color: #ff8820;
		border-radius: 50%;
		padding: 10rpx;
		margin-right: 12rpx;
		color: white;
	}
		
	.box{
		background-color: #fff;
		    border-top: 0.5px solid #f5f5f5;
		    font-weight: 700;
		    padding: 15px 15px 10px;
		    display: flex;
		    flex-direction: column;
	}
	.ktxje{
		    color: #999;
		    font-weight: 400;
		    font-size: 13px;
	}
		
	.input{
		color: #ffc300;
		margin-top: 25rpx;
		display: flex;
		align-items: flex-end;
		
		
	}
	.tixian{
		    color: #3ab54a;
		    font-weight: 700;
	}
		
	.shouxvfei{
		padding:10px 15px;
		    color: #999;
		    font-size: 13px;
	}
	.fangshi{
		    display: flex;
		    color: #303133;
		    font-size: 14px;
		    margin-top: 19px;
		    margin-left: 11px;
		    color: #303133;
		    font-weight: 400;
		    justify-content: space-between;
		    align-items: center;
	}
		
	.button{
		text-align: center;
		margin-top: 130rpx;
		
	}
	
</style>
